<link rel="stylesheet" href="./fake-ui.css">
<div id="root">
  <van-nav-bar title='首页' @backbuttonfn='clickLeft' @searchbuttonfn='clickRight'></van-nav-bar>
  <van-button type='创建' @createbtn='clickCreate'></van-button>
  <van-button type='修改' @createbtn='clickCreate'></van-button>
  <van-loading :show="false"></van-loading>
  <van-table :columns='columns' :data1='data1'></van-table>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="./fake-ui.js"></script>
<script>
  // navbar

  const vm = new Vue({
    el: "#root",
    data: {
      // 列
      columns: [
        { title: '编号', key: 'id' },
        { title: '姓名', key: 'name' },
        { title: '性别', key: 'sex' },
        { title: '攻击', key: 'kongfu' },
      ],
      // 数据
      data1: [
        { id: 1001, name: '蜘蛛侠', sex: '男', kongfu: '吐丝' },
        { id: 1002, name: '黑寡妇', sex: '女' },
        { id: 1003, name: '钢铁侠', sex: '男' },
        { id: 1004, name: '绿巨人', sex: '男' },
      ]

    },
    methods: {
      clickLeft() {
        console.log('fetch-back');
      },
      clickRight() {
        console.log('fetch-search');
      },
      clickCreate() {
        console.log('创建按钮');
      }
    }
  })
</script>